<template>
    <div class="app-content" style="height:100%;width:100%">
        <div id="container" style="height:100%;width:100%"></div>
        <TeleportContainer />
    </div>
</template>
  
<script >
import { defineComponent } from "vue";
import ErTable from '../components/ErTable.vue'
import { Graph } from "@antv/x6";
import { register, getTeleport } from "@antv/x6-vue-shape";
import { Transform } from '@antv/x6-plugin-transform'
import { Selection } from "@antv/x6-plugin-selection";

register({
    shape: "custom-vue-node",
    width: 100,
    height: 100,
    component: ErTable,
    ports: {
        groups: {
            top: {
                position: 'top',
                attrs: {
                    circle: {
                        magnet: true,
                        stroke: '#8f8f8f',
                        r: 5,
                    },
                },
            },
            bottom: {
                position: 'bottom',
                attrs: {
                    circle: {
                        magnet: true,
                        stroke: '#8f8f8f',
                        r: 5,
                    },
                },
            },
        },
    },
});
const TeleportContainer = getTeleport();

export default defineComponent({
    name: "X6Demo2",
    components: {
        TeleportContainer,
    },
    mounted() {
        const graph = new Graph({
            container: document.getElementById("container"),
            background: {
                color: "#ccc",
            },
            // autoResize: true,
            resizing: {
                enabled: true
            },
            connecting: {
                snap: {
                    radius: 50,
                },
                allowBlank: false,
                highlight: true,
                sourceAnchor: {
                    name: "right",
                },
                targetAnchor: {
                    name: "right",
                },
                connectionPoint: "anchor",
            },
            highlighting: {
                magnetAvailable: {
                    name: "stroke",
                    args: {
                        padding: 2,
                        attrs: {
                            "stroke-width": 2,
                            stroke: "red",
                        },
                    },
                },
                magnetAdsorbed: {
                    name: 'stroke',
                    args: {
                        attrs: {
                            fill: '#5F95FF',
                            stroke: '#5F95FF',
                        },
                    },
                },
            },
            // highlighting: true,
            interacting: true
        });

        graph.use(
            new Selection({
                enabled: true,
                multiple: true,
                rubberband: true,
                movable: true,
                showNodeSelectionBox: true,
            })
        );

        graph.use(new Transform({
            resizing: {
                enabled: true,
                minWidth: 200,
                orthogonal: true,
                allowReverse: true,
                autoScroll: true,
                restrict: false,
                preserveAspectRatio: false,
            },
            rotating: false,
        }));

        let s = graph.addNode({
            shape: "custom-vue-node",
            x: 100,
            y: 60,
            width: 400,
            height: 100,
            data: {
                title: 'test',
                columns: [{
                    title: '姓名2',
                    dataIndex: 'name',
                    key: 'name',
                    resizable: true,
                    width: 150,
                },
                {
                    title: '年龄3',
                    dataIndex: 'age',
                    key: 'age',
                    resizable: true,
                    width: 100,
                    minWidth: 100,
                    maxWidth: 200,
                },
                {
                    title: '住址',
                    dataIndex: 'address',
                    key: 'address',
                },],
                dataSource: [{
                    key: '1',
                    name: '西湖区湖底公园1号西',
                    age: 123,
                    address: '西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号',
                },
                {
                    key: '2',
                    name: '胡彦祖',
                    age: 42,
                    address: '西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号',
                },]
            },
            attrs: {
                body: {
                    rx: 4, // 圆角矩形
                    ry: 4,
                    strokeWidth: 0.4,
                    stroke: "white",
                    fill: "white",
                },
            },
            ports: {
                items: [
                    {
                        id: 'port_1',
                        group: 'top',
                    },
                    {
                        id: 'port_2',
                        group: 'bottom',
                    },
                ],
            },
        });


        let t = graph.addNode({
            shape: "custom-vue-node",
            x: 200,
            y: 260,
            width: 400,
            height: 200,
            data: {
                title: 'test1',
                columns: [{
                    title: '姓名2',
                    dataIndex: 'name',
                    key: 'name',
                    resizable: true,
                    width: 150,
                },
                {
                    title: '年龄3',
                    dataIndex: 'age',
                    key: 'age',
                    resizable: true,
                    width: 100,
                    minWidth: 100,
                    maxWidth: 200,
                },
                {
                    title: '住址',
                    dataIndex: 'address',
                    key: 'address',
                },],
                dataSource: [{
                    key: '1',
                    name: '768',
                    age: 123,
                    address: '3453',
                },
                {
                    key: '2',
                    name: '胡彦祖',
                    age: 42,
                    address: '12312',
                },]
            },
            attrs: {
                body: {
                    rx: 4, // 圆角矩形
                    ry: 4,
                    strokeWidth: 0.4,
                    stroke: "white",
                    fill: "white",
                },
            },
            ports: {
                items: [
                    {
                        id: 'port_1',
                        group: 'top',
                    },
                    {
                        id: 'port_2',
                        group: 'bottom',
                    },
                ],
            },
        });

        graph.addEdge({
            source: {
                cell: s,
                anchor: {
                    name: "right",
                },
                connectionPoint: "anchor",
            },
            target: {
                cell: t,
                anchor: {
                    name: "left",
                },
                connectionPoint: "anchor",
            },
        });
        let currentNodeSize = null;
        graph.on('node:resize', ({cell,e, x, y, node, view}) => {
            // console.log("node:resize",e, x, y, node, view)
            currentNodeSize = Object.assign({},node.size());
            console.log('node:resize',node.getProp('size'));
        });
        graph.on('node:resizing', ({cell,e, x, y, node, view}) => {
            // console.log("node:resizing",e, x, y, node, view)
            console.log("height",view.selectors.foContent.firstChild.clientHeight);
            if(!currentNodeSize){
                return;
            }
            const size = node.getProp("size");
            console.log("node:resizing",size.width, size.height);
            if(Math.abs(view.selectors.foContent.firstChild.clientHeight - size.height) <10 ){
                return;
            }
            node.setProp('size',{width:size.width,height:view.selectors.foContent.firstChild.clientHeight})
        })
        graph.on('node:resized', ({cell,e, x, y, node, view}) => {
            // console.log("node:resized",e, x, y, node, view)
            currentNodeSize = null;
        })
    },
});
</script>
<style>
html,
body,
#app,
#x6Container,
#app-content,
#container {
    width: 100%;
    height: 100%;
}
</style>